<template>
	<div v-loading="state.loading" class="iframe-main">
		<iframe
				id="iframe"
				ref="iframeRef"
				:src="state.iframeSrc"
				:style="mainHeightStyle(35)"
				frameborder="0"
				height="100%"
				width="100%"
				@load="hideLoading"
		></iframe>
	</div>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import {mainHeightStyle} from '@/utils/layoutUtil'
import {useRouter} from 'vue-router'

const router = useRouter()

const state = reactive({
	loading: true,
	iframeSrc: router.currentRoute.value.meta.url as string
})

const hideLoading = () => {
	state.loading = false
}
</script>

<style lang="scss" scoped>
.iframe-main {
	margin: var(--cus-main-space);
}
</style>
